<template>
  <div class="container">
    <div class="navigationBar" style="width: 98%;margin: 10px auto 0">
      <el-row :gutter="24">

        <el-col :span="3">
          <el-select v-model="listQuery.type" placeholder="请选择认证类型" @change="changeSearchType">
            <el-option
              v-for="item in type_options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>

        <el-col :span="3">
          <el-input v-model="listQuery.account_name" placeholder="请输入开户名称" clearable @change="search"></el-input>
        </el-col>

        <el-col :span="2">
          <el-select v-model="listQuery.status" placeholder="状态">
            <el-option
              v-for="item in status_options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>

        <el-col  :span="13">
          <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        </el-col>

        <el-col :span="3" class="add" v-if="false">
          <el-button type="success" @click="handleAdd" class="add">增加绑定</el-button>
        </el-col>
      </el-row>
    </div>

    <template>
      <div class="filter-container clear-fixed">
        <el-checkbox  class="item" v-model="formThead.account_name" label="开户名称">开户名称</el-checkbox>
        <el-checkbox v-model="formThead.store_id" label="所属店铺">所属店铺</el-checkbox>
        <el-checkbox v-model="formThead.organization_name" label="机构名称">机构名称</el-checkbox>
        <el-checkbox v-model="formThead.company_name" label="公司名称" v-if="listQuery.type==1 || listQuery.type==''">公司名称</el-checkbox>
        <el-checkbox v-model="formThead.type" label="认证类型">认证类型</el-checkbox>
        <el-checkbox v-model="formThead.pay_to" label="打款到">打款到</el-checkbox>
        <el-checkbox v-model="formThead.account_number" label="银行卡号">银行卡号</el-checkbox>
        <el-checkbox v-model="formThead.name_of_cardholder" label="持卡人姓名">持卡人姓名</el-checkbox>
        <el-checkbox v-model="formThead.status" label="状态">状态</el-checkbox>
        <el-checkbox v-model="formThead.unified_social_credit_code" label="社会统一信用代码" v-if="listQuery.type==1 || listQuery.type==''">社会统一信用代码</el-checkbox>
        <el-checkbox v-model="formThead.address" label="详细地址">详细地址</el-checkbox>
        <el-checkbox v-model="formThead.id_of_cardholder" label="持卡人身份证">持卡人身份证</el-checkbox>
      </div>
      <div class="filter-container clear-fixed">
        <el-checkbox v-model="formThead.account_id_start_date" label="身份证开始有效日期">身份证有效期开始日期</el-checkbox>
        <el-checkbox v-model="formThead.account_id_end_date" label="身份证有效期结束日期">身份证有效期结束日期</el-checkbox>
        <el-checkbox v-model="formThead.bank_id" label="主行">主行</el-checkbox>
        <el-checkbox v-model="formThead.branch_bank_id" label="分行">分行</el-checkbox>
        <el-checkbox v-model="formThead.business_licences" label="营业执照照片" v-if="listQuery.type==1 || listQuery.type==''">营业执照照片</el-checkbox>
        <el-checkbox v-model="formThead.front_of_account_image" label="身份证正面">身份证正面</el-checkbox>
        <el-checkbox v-model="formThead.back_of_account_image" label="身份证反面">身份证反面</el-checkbox>
      </div>
    </template>




    <el-table :data="storeBankList" style="width: 98%;margin: 10px auto 0" border :key="branchData.length"
              v-loading="loading"
              element-loading-text="拼命加载中....">

      <el-table-column label="开户名称" align="center" v-if="formThead.account_name">
        <template slot-scope="{row}">
          <span>{{row.account_name}}</span>
        </template>
      </el-table-column>

      <el-table-column label="所属店铺" align="center" v-if="formThead.store_id">
        <template slot-scope="{row}">
          <span>{{getStoreName(row.store_id)}}</span>
        </template>
      </el-table-column>

      <el-table-column label="机构名称" align="center" v-if="formThead.organization_name">
        <template slot-scope="{row}">
          <span>{{row.organization_name}}</span>
        </template>
      </el-table-column>

      <el-table-column label="公司名称" align="center" v-if="formThead.company_name && listQuery.type=='1'">
        <template slot-scope="{row}">
          <span>{{row.company_name}}</span>
        </template>
      </el-table-column>


      <el-table-column prop="tag" label="认证类型" align="center" v-if="formThead.type">
        <template slot-scope="scope">
          <el-tag :type="scope.row.type === 0 ? 'success' : 'primary'" disable-transitions>
            {{scope.row.type === 0 ? '个人':'企业'}}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="tag" label="打款到" align="center" v-if="formThead.pay_to">
        <template slot-scope="scope">
          <el-tag :type="scope.row.pay_to === 0 ? 'success' : 'primary'" disable-transitions>
            {{scope.row.pay_to === 0 ? '个人账号':'公司账号'}}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column label="银行卡号" align="center" v-if="formThead.account_number">
        <template slot-scope="{row}">
          <span>{{row.account_number}}</span>
        </template>
      </el-table-column>

      <el-table-column label="持卡人姓名" align="center" v-if="formThead.name_of_cardholder">
        <template slot-scope="{row}">
          <span>{{row.name_of_cardholder}}</span>
        </template>
      </el-table-column>


      <el-table-column label="社会统一信用代码" align="center" v-if="formThead.unified_social_credit_code && listQuery.type=='1'">
        <template slot-scope="{row}">
          <span>{{row.unified_social_credit_code}}</span>
        </template>
      </el-table-column>

      <el-table-column label="详细地址" align="center" v-if="formThead.address">
        <template slot-scope="{row}">
          <span>{{row.address}}</span>
        </template>
      </el-table-column>


      <el-table-column label="持卡人身份证" align="center" v-if="formThead.id_of_cardholder">
        <template slot-scope="{row}">
          <span>{{row.id_of_cardholder}}</span>
        </template>
      </el-table-column>

      <el-table-column label="身份证有效期开始日期" align="center" v-if="formThead.account_id_start_date">
        <template slot-scope="{row}">
          <i class="el-icon-time"></i>
          <span>{{row.account_id_start_date}}</span>
        </template>
      </el-table-column>

      <el-table-column label="身份证有效期结束日期" align="center" v-if="formThead.account_id_end_date">
        <template slot-scope="{row}">
          <i class="el-icon-time"></i>
          <span>{{row.account_id_end_date}}</span>
        </template>
      </el-table-column>


      <el-table-column label="主行" align="center" v-if="formThead.bank_id">
        <template slot-scope="{row}">
          <span>{{row.bank_id}}</span>
        </template>
      </el-table-column>

      <el-table-column label="分行" align="center" v-if="formThead.branch_bank_id">
        <template slot-scope="{row}">
          <span>{{row.branch_bank_id}}</span>
        </template>
      </el-table-column>

      <el-table-column label="营业执照照片" align="center" v-if="formThead.business_licences && listQuery.type=='1'">
        <template slot-scope="{row}">
          <!--          <span>{{row.avatar}}</span>-->
          <img :src="row.business_licences === '' ? null : row.business_licences" alt="暂无营业执照"
               @click="bigImage(row.business_licences)">
        </template>
      </el-table-column>

      <el-table-column label="身份证正面" align="center" v-if="formThead.front_of_account_image">
        <template slot-scope="{row}">
          <!--          <span>{{row.avatar}}</span>-->
          <img :src="row.front_of_account_image === '' ? null : row.front_of_account_image" alt="暂无图片"
               @click="bigImage(row.front_of_account_image)">
        </template>
      </el-table-column>

      <el-table-column label="身份证反面" align="center" v-if="formThead.back_of_account_image">
        <template slot-scope="{row}">
          <!--          <span>{{row.avatar}}</span>-->
          <img :src="row.back_of_account_image === '' ? null : row.back_of_account_image" alt="暂无图片"
               @click="bigImage(row.back_of_account_image)">
        </template>
      </el-table-column>

<!--      <el-table-column label="状态" align="center" v-if="formThead.status">-->
<!--        <template slot-scope="{row}">-->
<!--          <span v-if="row.status === 0" style="color: #409EFF">待审核</span>-->
<!--          <span v-else-if="row.status === 1" style="color: #2ac06d">成功</span>-->
<!--          <span v-else-if="row.status === 2" style="color: red">失败</span>-->
<!--          <span v-else style="color: red">暂无</span>-->
<!--        </template>-->
<!--      </el-table-column>-->

            <el-table-column label="状态" align="center" v-if="formThead.status">
              <template slot-scope="{row}">
                <el-select v-model="row.status + ''" filterable placeholder="请选择状态" class="status-select"
                           @change="handleChangeStatus($event, row.customer_store_identification_id)">
                  <el-option
                    v-for="item in status_options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>


<!--      <el-table-column label="增加时间" align="center">-->
<!--        <template slot-scope="{row}">-->
<!--          <i class="el-icon-time"></i>-->
<!--          <span>{{row.date_added}}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->

<!--      <el-table-column label="修改时间" align="center">-->
<!--        <template slot-scope="{row}">-->
<!--          <i class="el-icon-time"></i>-->
<!--          <span>{{row.date_modified}}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="操作" align="center">
        <template slot-scope="{row}">
          <el-button size="mini" type="primary" @click="handleEdit(row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="openDelete(row.customer_store_identification_id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <transition name="el-zoom-in-top">
      <div v-show="bigImageSrc !== null && bigImageSrc!==''" class="bigImg" @click="bigImage(null)">
        <img :src="bigImageSrc" style="width:auto; height:400px;border-radius:5px;">
      </div>
    </transition>


    <div class="pagination-container">
      <el-pagination :current-page="listQuery.page" :page-sizes="[10,15,20,30,50]" :page-size="listQuery.limit" :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
    </div>

    <add-store-bank ref="showAddDialog"/>
    <edit-store-bank ref="showEditDialog"/>


  </div>
</template>

<script>
  import store from '@/store'
  import {list as getBankList} from '@/api/thk/cms/bank'
  import {list as getStoreList} from '@/api/thk/store'
  import {list,del,edit, BankTransform} from '@/api/thk/cms/bindStoreBank'
  import {list as getProvinceAndCityList} from '@/api/thk/city'



  import addStoreBank from './add'
  import editStoreBank from './edit'

  /**
   store_id	                        所属店铺id
   type                             认证类型；0个人，1企业
   organization_name                机构名称
   company_name                     公司名称
   unified_social_credit_code     	统一社会信用代码
   province_id                      省份
   city_id                          城市
   address                          详细地址
   name_of_cardholder               持卡人姓名/法人姓名
   id_of_cardholder                 持卡人身份证号/法人身份证号
   pay_to	TinyInt                   打款到0个人账号，1公司公账
   account_name                     开户名称
   account_number                   银行卡卡号
   bank_id                          开户行id
   branch_bank_id                   开户行支行id
   status                           0待审核，1成功，2失败
   date_added                       添加日期
   date_modified                    更新日期

   business_licences                营业执照照片
   account_id_start_date            身份证有效期开始日期
   account_id_end_date              身份证有效期结束日期
   front_of_account_image           身份证反面
   back_of_account_image            身份证反面

   */

  export default {
    name: 'StoreBank',
    components: {
      editStoreBank,
      addStoreBank,
    },

    data() {
      return {



        bankData: [],
        branchData: [],
        storeList: [],
        storeBankList: [],
        provinceAndCityList:[],

        bigImageSrc: null,

        listQuery: {
          account_name: undefined,
          status: undefined,
          type: '1',
          page: 1,
          pagesize: 10
        },


        total: undefined,

        status_options: [{
          value: '0',
          label: '待审核'
        }, {
          value: '1',
          label: '成功'
        }, {
          value: '2',
          label: '失败'
        }],

        type_options: [{
          value: '0',
          label: '个人'
        }, {
          value: '1',
          label: '企业'
        }, {
          value: '',
          label: '全部'
        }],


        formThead: {
          store_id: true,
          organization_name: true,
          company_name: true,
          unified_social_credit_code: false,
          address: false,
          type: true,
          pay_to: true,
          account_name: true,
          account_number: true,
          name_of_cardholder: true,
          id_of_cardholder: false,
          account_id_start_date: false,
          account_id_end_date:  false,
          status: true,
          bank_id: false,
          branch_bank_id: false,
          business_licences: false,
          front_of_account_image: false,
          back_of_account_image:false,

        },

        loading: true,
      }
    },


    created() {
      this.getBankData()
      this.getStoreBankData()
      this.getStoreList()
      this.getProvinceAndCityList()

    },

    updated: function () {
      this.$nextTick(function () {
        this.loading = false
      })
    },

    methods: {

      // 获取数据
      getStoreBankData(){
        list(store.getters.token, this.listQuery).then(res => {
          this.total = res.data.list.total
          this.storeBankList = res.data.list.data
          console.log('>>>>>>>> res >>>>>>>>')
          console.log(this.storeBankList)

        }).catch(err => {
          console.log(err)
        })

      },

      // 获取银行的数据
      getBankData(){
        getBankList(store.getters.token).then(res => {
          console.log(res)
          this.bankData = res.data.list
        }).catch(err => {
          console.log(err)
        })
      },



      // 获取省市数据
      getProvinceAndCityList(){
        getProvinceAndCityList(store.getters.token).then(res => {
          console.log('===== getProvinceList =====')

          this.provinceAndCityList = res.data.list
          // 获取全部数据的时候,将city的数据筛选出来
          this.getCityList()

          console.log(this.provinceAndCityList)
        }).catch(err => {
          console.log(err)
        })
      },


      // 触发增加按钮弹出增加问题对话框
      handleAdd(){
        // 将bank的数据转换后传入子组件
        let bankTransform = new BankTransform(this.bankData)
        let transFormBankData = bankTransform.transForm()
        this.$refs.showAddDialog.cancelDialog(transFormBankData, this.storeList)
      },

      handleEdit(row){
        // 转换bank数据
        // let bankTransform = new BankTransform(this.bankData)
        // let transFormBankData = bankTransform.transForm()

        this.$refs.showEditDialog.showEditStoreBankDialog(row, this.bankData, this.storeList, this.provinceAndCityList)
      },

      // 删除store_bank
      handleDelete(customer_store_identification_id){
        del(store.getters.token, customer_store_identification_id).then(res => {
          this.getStoreBankData()
          console.log("删除成功!",res)
        }).catch(err => {
          console.log("删除失败",err)
        })
      },

      // 弹出是否删除对话框, then中调用handleDelete
      openDelete(customer_store_identification_id) {
        this.$confirm('此操作将会删除绑定的信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.handleDelete(customer_store_identification_id)
          this.$message({
            type: 'success',
            message: '删除成功!'

          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },

      // 获取店铺列表
      getStoreList(){
        getStoreList(store.getters.token).then(res =>{
          this.storeList = res.data.list.data
          console.log('--------->')
          console.log(this.storeList)

        },error => {
          console.log(error)
        })
      },

      // 根据用户id返回用户名,用于显示店铺所属用户
      getStoreName(customer_store_id){
        let stores = this.storeList.filter(store => {
          return store.customer_store_id == customer_store_id
        })
        if(stores[0]){
          return stores[0].name
        }

        return customer_store_id

      },

      search(){
        this.listQuery.page = 1
        this.getStoreBankData()
      },

      handleSizeChange(val) {
        this.listQuery.pagesize = val
        this.getStoreBankData()

      },
      handleCurrentChange(val) {
        this.listQuery.page = val
        this.getStoreBankData()
      },

      changeSearchType(value){
        this.listQuery.type = value
        this.getStoreBankData()
      },

      handleChangeStatus(status, customer_store_identification_id){
        let data = {
          customer_store_identification_id,
          status
        }

        edit(store.getters.token, data).then(res => {
        }).then(err => {
          this.$message({type: "success", message:"修改成功!"})
          this.getStoreBankData()
        })
        console.log(data)

      },

      // 大图弹窗函数
      bigImage(src) {
        if (src!==null) {
          this.$set(this, 'bigImageSrc', src)
          console.log(this.bigImageSrc)
        } else {
          this.$set(this, 'bigImageSrc', null)
        }
      },

    }
  }

</script>

<style scoped>
  .add{
    position: relative;
    left: 25px;
    top: 20px;
  }
  .filter-container{
    margin: 10px 0 -9px 20px;
  }

  img{
    height: 50px;
    width: 50px;
    margin: 0;
    padding: 0;
    border-radius: 4px;
  }
  .clear-fixed::after {
    content: "";
    clear: both;
    display: block;
  }
  .bigImg img{
    max-width: 600px;
    min-width: 150px;
    height:auto;
    border-radius:10px;
  }

  .bigImg{
    min-width:100%;
    min-height:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:999999;
    background:rgba(0,0,0,.5);
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    /*transition:1s;*/
  }

</style>
